// 上面概览区域 
<template>
  <div class="overview">
    <div class="overviewLeft" id="repair-bug">
      <swiper
        :options="swiperOptionTop"
        class="gallery-top"
        ref="swiperTop"
        v-if=" miniBanners.length > 0 "
      >
        <swiper-slide v-for="(item,index) in miniBanners" :key="index">
          <img :src="item">
        </swiper-slide>
      </swiper>

      <!-- swiper2 Thumbs -->
      <swiper
        :options="swiperOptionThumbs"
        class="gallery-thumbs"
        ref="swiperThumbs"
        v-if=" miniBanners.length > 0 "
      >
        <swiper-slide v-for="(item,index) in miniBanners" :key="index">
          <img :src="item" style="cursor: pointer;">
        </swiper-slide>
      </swiper>

      <div class="share">
        <!-- <span class="el-icon-share" @click="share">分享</span> -->
        <span class="el-icon-star-on" @click="collectionGoods">收藏商品</span>
      </div>
    </div>
    <div class="overviewCenter">
      <h2>{{ info.title }}</h2>
      <h3>{{ info.desc }}</h3>
      <div class="price">
        <p>
          <i>促销价：</i>
          <span>￥{{ info.selling_price }}</span>
        </p>
        <p>
          <i>市场价：</i>
          <s>￥{{ info.market_price }}</s>
        </p>
      </div>
      <div class="deliveryIntroduction">
        <p class="goodsCode">
          <i>商品型号：</i>
          <bdi>{{ SpecificationType.title }}</bdi>
        </p>
        <p>
          <i>库 存：</i>
          <bdi>{{ info.goods_stock }} {{info.goods_unit}}</bdi>
        </p>
        <p>
          <i>货期：</i>
          <bdi>{{ info.delivery_time }}个工作日</bdi>
          <!-- <span @click="showInvalid">出货及送达失效说明 >></span> -->
        </p>
        <p>
          <i>最小订货量：</i>
          <bdi>{{info.min_order}} {{info.goods_unit}}</bdi>
        </p>
      </div>
      <div class="Counter">
        <el-input-number size="mini" v-model="num" :min="0" :max="info.goods_stock"></el-input-number>
        <!-- {{info.goods_unit}} -->
      </div>
      <div class="buttonz">
        <el-button size="small" @click="addCart" :loading="cartLoading">
          <span class="el-icon-sold-out"></span> 加入购物车
        </el-button>
      </div>
      <div class="payPaymentMethod">
        <span>支付方式：</span>
        <ul>
          <li>
            <img src="@/assets/paymenticon/zz.jpg">
            <i>支付宝</i>
          </li>
          <li>
            <img src="@/assets/paymenticon/ww.jpg">
            <i>微信</i>
          </li>
          <li>
            <img src="@/assets/paymenticon/xx.jpg">
            <i>线下转账</i>
          </li>
        </ul>
      </div>
    </div>

    <div class="overviewRight">
      <h3>
        <span>{{ brand.title }}</span>
      </h3>
      <div>
        <img :src="brand.logo" alt>
        <p>{{ brand.desc }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import minibanner from "../../../assets/images/miniBanner.png" // 图片

export default {
  name: "overview",
  props: {
    brand: {
      type: Object
    },
    info: {
      type: Object
    },
    miniBanners: {
      type: Array
    },
    SpecificationType: {
      type: Object
    }
  },
  // components: {
  //   PicZoom
  // },

  data() {
    return {
      testBanner: [
        'https://www.misumi.com.cn/linked/material/mech/MSM1/PHOTO/10302009210.jpg',
        'https://misumi.scene7.com/is/image/misumi/221005102014_20151112_m_01_99999_cn?$log_reco$',
        'https://www.misumi.com.cn/linked/material/mech/NSK1/PHOTO/221006491511.jpg',
      ],
      cartLoading: false,
      minibanner,
      centerDialogVisible: false, // el-dialog 的显示与隐藏
      num: 1, // 计数器
      swiperOptionTop: {
        spaceBetween: 25,
        observer: true,
        observeParents: true,
      },
      swiperOptionThumbs: {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
      },
      configs: {
        width: 500,
        height: 500,
        maskWidth: 102,
        maskHeight: 102,
        maskColor: 'red',
        maskOpacity: 0.2
      }
    }
  },

  methods: {
    // 分享
    share() {
      console.log('点击了分享...')
    },
    // 失效说明触发
    showInvalid() {
      this.$alert(<p style="text-indent:2em">
        这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容
      </p>,
        '出货及送达失效说明',
        {
          confirmButtonText: '确定',
          // callback: action => {
          //   this.$message({
          //     type: 'info',
          //     message: `action: ${action}`
          //   });
          // }
        })
    },

    // 收藏商品
    async collectionGoods() {
      if (this.$store.state.token) {
        let user_id = this.$store.state.UserInfor.user_id
        let product_id = this.info.id
        console.log(user_id)
        let res = await this.$http({
          method: 'post',
          url: 'index/web/addCollection',
          data: {
            user_id,
            product_id
          }
        })
        console.log(res)
        if (res.data.State.Code == 200) {
          this.$notify({
            title: '商品成功加入收藏...',
            type: 'success'
          })
        }
        // 判断token是否存在

      } else {
        this.$router.push("/login")
      }
    },

    // 添加购物车
    async addCart() {
      this.cartLoading = true
      if (this.info.goods_stock) {
        let user_id = this.$store.state.UserInfor.user_id,
          num = this.num,
          product_id = this.$store.state.id, // 商品id
          goods_spec = this.info.spec
        // 信息更新

        console.log(user_id, product_id, num, goods_spec)
        if (this.$store.state.token) {
          // 判断token是否存在
          this.$http({
            method: "post",
            url: `index/web/addToCart`,
            headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
            data: {
              user_id,
              num,
              product_id,
              goods_spec
            }
          })
            .then(res => {
              this.getCartNum()
              let data = res.data
              // this.centerDialogVisible = true
              this.$message({
                message: '成功添加到购物车...',
                type: 'success'
              })
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          this.$router.push("/login")
        }
      } else {
        this.cartLoading = false
        this.$notify.error({
          title: '该商品暂时没有库存 请选择其他商品...'
        })
      }
      // let param ={}

    },

    // 获取购物车数量
    async getCartNum() {
      let user_id = this.$store.state.UserInfor.user_id
      let res = this.$http({
        method: 'post',
        url: 'index/index/cartNum',
        data: {
          user_id
        }
      })
      res.then((res) => {
        this.cartLoading = false
        if (res.data.State.Code == 200) {
          this.$store.commit('shopping_num', res.data.data)
          this.$store.commit('flag', true)
          setTimeout(() => {
            this.$store.commit('flag', false)
          }, 1000)
        }
      })
        .catch((err) => {
          console.log(err)
        })


    },

    // 移步到购物车
    jumpShoppingCart() {
      this.centerDialogVisible = false
      this.$router.push("/ShoppingCart")
    },
    // swiper 初始化
    swiperInit() {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.swiper
        const swiperThumbs = this.$refs.swiperThumbs.swiper
        swiperTop.controller.control = swiperThumbs
        swiperThumbs.controller.control = swiperTop
      })
    }

  },

  // 双向控制过程中使用ref 但是当mounted的钩子执行时 ref并未挂载上 故用updated钩子函数来解决bug
  updated() {
    this.swiperInit()
  }

}
</script>
<style lang="scss" scoped>
.overview {
  width: 100%;
  height: 552px;
  border-top: 1px #dddddd solid;
  border-bottom: 1px #dddddd solid;
  padding-top: 26px;
  display: flex;
  flex-direction: row;
  .overviewLeft {
    box-sizing: border-box;
    width: 280px;
    padding-right: 10px;
    position: relative;
    /deep/ .gallery-top {
      box-sizing: border-box;
      margin-left: 33px;
      width: 204px;
      height: 204px;
      overflow: hidden;
      width: 204px;
      /deep/ .swiper-slide {
        width: 204px;
        ._magnifier {
          width: 204px;
          height: 204px;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .gallery-thumbs {
      box-sizing: border-box;
      height: 90px;
      padding: 10px 10px;
      /deep/ .swiper-slide {
        margin: 0px;
        img {
          display: block;
          width: 60px;
          height: 60px;
        }
      }
    }
    .gallery-thumbs .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-active {
      opacity: 1;
    }
    .share {
      color: #868686;
      font-size: 12px;
      padding-left: 20px;
      padding-top: 60px;
      span {
        display: inline-block;
        padding: 4px 10px;
        margin: 0 25px;
        border-radius: 5px;
        cursor: pointer;
        &:hover {
          color: #fff;
          background-color: #0a83e7;
        }
      }
    }
  }
  .overviewCenter {
    width: 678px;
    box-sizing: border-box;
    padding-left: 10px;
    // background: #29e910;
    .price {
      width: 628px;
      height: 116px;
      background: #f0f0f0;
      margin-top: 16px;
      p {
        i {
          padding-left: 34px;
          line-height: 32px;
          margin-right: 10px;
        }
        span {
          color: red;
        }
      }
      p:first-child {
        padding-top: 8px;
        span {
          font-size: 24px;
          font-weight: 700;
        }
      }
      p:last-child {
        span {
          border: 1px solid red;
        }
      }
    }
    .deliveryIntroduction {
      line-height: 32px;
      padding-top: 10px;
      p {
        i {
          color: #717171;
          font-size: 12px;
        }
        bdi {
          display: inline-block;
          color: #000;
        }
        &:nth-child(2) span {
          background: #ff9000;
          padding: 2px 3px;
          margin: 0 15px;
        }
        &:nth-child(3) span {
          padding: 2px 3px;
          margin: 0 15px;
          color: #0066ff;
          cursor: pointer;
        }
      }
      .goodsCode {
        display: flex;
        flex-direction: row;

        bdi {
          width: 580px;
          word-wrap: break-word;
          // overflow: hidden;
          // white-space: nowrap;
          // text-overflow: ellipsis;
        }
      }
    }
    .Counter {
      margin-top: 24px;
      color: #777777;
    }
    .buttonz {
      margin-top: 20px;
    }
    .payPaymentMethod {
      display: flex;
      flex-direction: row;
      line-height: 100px;
      ul {
        display: flex;
        flex-direction: row;
        font-size: 12px;
        li {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin: 0 20px;
          // &:hover {
          //   color: #0a83e7;
          //   cursor: pointer;
          // }
          img {
            width: 20px;
            height: 20px;
            border-radius: 5px;
            padding-right: 5px;
          }
        }
      }
    }
    div {
      p {
        i {
          text-align: justify;
          text-justify: inter-ideograph;
        }
      }
    }
  }
  .overviewRight {
    width: 244px;
    h3 {
      background-color: #f3f3f3;
      border-top: 1px solid #d6d6d6;
      border-left: 1px solid #d6d6d6;
      border-right: 1px solid #d6d6d6;
      line-height: 34px;
      font-size: 14px;
      color: #404040;
      padding-left: 19px;
      span {
        border-left: 3px solid #a2a2a2;
        padding-left: 15px;
      }
    }
    div {
      border: 1px solid #d6d6d6;
      img {
        display: block;
        width: 149px;
        height: 89px;
        margin: auto;
      }
      p {
        max-width: 410px;
        padding: 12px 12px;
        line-height: 20px;
        color: #404040;
        font-size: 12px;
        text-indent: 24px;
        text-align: justify;
        text-justify: inter-ideograph;
      }
    }
  }
}
</style>


